// 引入 Count 的 UI 组件
import CountUI from "../../components/Count";

// 引入 connect 用于链接 UI 组件与 redux
import { connect } from "react-redux";
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction,
} from "../../redux/count_action";

/**
 * mapStateToProps 函数返回的对象中的 key 就作为传递给 UI 组件 props 的 key，
 * value 就作为传递给 UI 组件 props 的 value——状态
 * @param {Number} state 状态
 * @returns Object:{key:value}
 */
function mapStateToProps(state) {
    return { count: state };
}

/**
 * mapDispatchToProps 函数返回的对象中的 key 就作为传递给 UI 组件 props 的 key,
 * value 就作为传递给 UI 组件 props 的 value——操作方法
 * @param {function} dispatch store.dispatch
 * @returns Object:{key:function}
 */
function mapDispatchToProps(dispatch) {
    return {
        jia: (number) => dispatch(createIncrementAction(number)),
        jian: (number) => dispatch(createDecrementAction(number)),
        jiaAsync: (number) => dispatch(createIncrementAsyncAction(number)),
    };
}

/**
 * 使用 connect() 创建并暴露一个 Count 的容器组件
 */
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
